<template>
  <!-- <transition name="slideWindow-fade"> -->

  <div class="slidwindow" :class="[slidingWindowDisplay ? 'open' : 'close']">
    <div class="slidwindow_header">
      <div class="title">
        <i class="iconfont icon-fanhui3" style="font-size:14px" v-if="current !== 1 && current !== 0" @click="back()"></i>
        指导中心
      </div>
      <div class="icon">
        <i class="iconfont icon-shouye1" style="font-size:16px"></i>
        <i class="iconfont icon-guanbi" @click="closeSlidingWindow"></i>
      </div>
    </div>
    <div v-if="current == 0">
      <Loading></Loading>
    </div>
    <div class="slidwindow_content_box" v-if="current == 1">
      <div class="slidwindow_content">
        <div class="top">
          <div class="title">
            <p>如您所知</p>
          </div>

          <div class="text">后羿零碳是一款可将公司和客户联系在一起的客户关系管理解决方案。后羿零碳 是一个集成 CRM
            平台，可以为您的所有部门（包括营销部门、销售部门、商务部门和服务部门）提供所有客户的单一共享视图。
            体验版</div>
          <div class="blue_text">忽略</div>
        </div>
        <div class="content_header">
          <div class="title">为您选中</div>
          <div class="btn">查看更多</div>
        </div>
        <div class="content_text_box">
          <i class="iconfont icon-menu-s"></i>
          <div class="content_text">
            <p @click="otherPage()">对你的客户、员工和投资者来说</p>
            <div class="text">后羿零碳帮助客户制定ESG改进方案，降低风险，提高安全性、可持续性和生产率。</div>
            <span>6个步骤</span>
          </div>
        </div>
        <div class="content_text_box">
          <i class="iconfont icon-menu-s"></i>
          <div class="content_text">
            <p @click="otherPage()">可持续的未来</p>
            <div class="text">降低风险，吸引投资者，增加收入，提升品牌并降低您的成本与后羿零碳的集成环境、社会和治理(ESG)管理解决方案。我们帮助减少暴露在环境风险和驱动您的织迈向可持续发展的未来。</div>
            <span>6个步骤</span>
          </div>
        </div>
        <div class="content_text_box">
          <i class="iconfont icon-menu-s"></i>
          <div class="content_text">
            <p @click="otherPage()">世界一流的安全文化</p>
            <div class="text">通过综合ESG解决方案保护您的员工和客户，提高人员、流程和产品的安全性。我们帮助企业建立世界级的安全文化，提升他们的全球声誉。</div>
            <span>6个步骤</span>
          </div>
        </div>
      </div>
    </div>
    <div class="slidwindow_content_box" v-if="current == 2">
      <div class="slidwindow_content">
        <div class="top">
          <div class="title">
            <p>详细信息</p>
          </div>

          <div class="text">对于提交到指导面板的信息，它们有时会传输到 Trailhead，并在 Salesforce 组织外部托管，同时以您与 Salesforce 之间的单独条款和条件为准。如果现有
            Trailhead 帐户与工作电子邮件关联，有时包含正在获取和已获取的徽章。</div>
          <div class="blue_text">忽略</div>
        </div>

        <div style="margin-top:20px">
          <a-collapse v-model="activeKey">
            <a-collapse-panel key="1" header="为 Salesforce 自动启用 MFA 做准备">
              <p>为 Salesforce 自动启用 MFA 做准备</p>
            </a-collapse-panel>
            <a-collapse-panel key="2" header="跟踪强制实施日期" :disabled="false">
              <p>跟踪强制实施日期</p>
            </a-collapse-panel>
            <a-collapse-panel key="3" header="为后羿零碳自动启动MFA做准备" disabled>
              <p>为后羿零碳自动启动MFA做准备</p>
            </a-collapse-panel>
          </a-collapse>
        </div>
      </div>
    </div>
  </div>
  <!-- </transition> -->
</template>

<script>
import { Mixin } from "@/mixins/mixin.js";
import Loading from "@/components/Tools/Loading.vue";
export default {
  mixins: [Mixin],
  data() {
    return {
      text: `A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`,
      activeKey: ["1"],
      current: 1,
      lastPageCurrent: 1
    };
  },
  components: {
    Loading
  },
  methods: {
    closeSlidingWindow() {
      this.setSlidingWindowDisplay(false);
    },
    back() {
      this.current = this.lastPageCurrent;
    },
    otherPage() {
      this.lastPageCurrent = this.current;
      this.current = 0; //loading状态
      setTimeout(() => {
        this.current = 2;
      }, 1500);
    }
  }
};
</script>

<style lang="scss" scoped>
.open {
  position: absolute;
  right: 0;
  top: 3px;
  width: 450px;
  bottom: 0px;
  transition: 0.2s;
}

.close {
  position: absolute;
  right: -450px;
  top: 3px;
  width: 450px;
  bottom: 0px;
  transition: 0.2s;
}

.slidwindow {
  border: 1px solid #ccc;
  background: #fff;
  border-right: none;
  border-radius: 5px;
  box-shadow: -2px 0px 10px #ccc;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 99;

  .slidwindow_header {
    height: 42px;
    line-height: 42px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 20px;
    border-bottom: 1px solid #ccc;

    .title {
      font-size: 16px;
      color: #999;

      i {
        font-size: 12px;
        color: #999;
        margin-right: 8px;
        cursor: pointer;

        &:hover {
          opacity: 0.7;
          color: #1187e6;
          transition: 0.2s;
        }
      }
    }

    .icon {
      i {
        font-size: 12px;
        color: #999;
        margin-right: 14px;
        cursor: pointer;

        &:hover {
          opacity: 0.7;
          color: #1187e6;
          transition: 0.2s;
        }
      }
    }
  }

  .slidwindow_content_box {
    flex: 1;
    overflow: auto;

    .slidwindow_content {
      padding: 0 20px;

      .top {
        margin-top: 10px;
        border: 1px solid #ececec;
        border-radius: 3px;
        padding: 10px;

        .title {
          font-weight: 600;
          font-size: 16px;
          color: #000;
          text-align: left;

          p {
            margin: 0;
          }
        }

        .text {
          text-align: left;
          font-size: 14px;
          line-height: 22px;
        }

        .blue_text {
          font-size: 12px;
          text-align: left;
          color: #1187e6;
          margin: 10px 0;
          cursor: pointer;
        }
      }

      .content_header {
        margin: 20px 0 10px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        .title {
          font-weight: 600;
          font-size: 16px;
          color: #000;
        }

        .btn {
          cursor: pointer;
          padding: 4px 14px;
          border: 1px solid #ececec;
          font-size: 14px;
          color: #1187e6;
          border-radius: 3px;
        }
      }

      .content_text_box {
        display: flex;
        flex-direction: row;
        border: 1px solid #ececec;
        padding: 10px;
        margin-bottom: 10px;

        i {
          background: #1187e6;
          color: #fff;
          font-size: 24px;
          width: 40px;
          height: 40px;
          border-radius: 3px;
        }

        .content_text {
          flex: 1;
          margin-left: 16px;

          p {
            font-size: 16px;
            color: #1187e6;
            font-weight: 600;
            margin: 0;
            text-align: left;
            margin-bottom: 10px;

            &:hover {
              text-decoration: underline;
              cursor: pointer;
              color: #5476a6;
            }
          }

          .text {
            text-align: left;
            font-size: 12px;
          }

          span {
            font-size: 12px;
            color: #999;
            display: block;
            text-align: right;
          }
        }
      }

      ul {
        margin-top: 20px;
        display: flex;
        flex-direction: column;

        li {
          text-align: left;
          line-height: 30px;
        }
      }
    }
  }
}

.slideWindow-fade-enter-active {
  transition: all 0.3s ease;
}

.slideWindow-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}

.slideWindow-fade-enter,
.slideWindow-fade-leave-to

/* .slide-fade-leave-active for below version 2.1.8 */
  {
  transform: translateX(450px);
  opacity: 1;
}</style>